<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document -->
    <!-- Document -->
    <!-- Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像 <body> 、<table> 这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。 -->


    <p>Document.alinkColor</p>
    <!-- Document.alinkColor -->
    <!-- 已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 -->
    <div>
        <a href="#">Document.alinkColor</a>
    </div>
    <script>
        console.log('document.alinkColor is ' + document.alinkColor);
        document.alinkColor = 'orange';
    </script>
    <p>document.linkColor</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/linkColor -->
    <!-- 已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 -->
    <!-- linkColor 用来获取和设置文档内链接元素(<a>)的颜色. -->
    <script>
        console.log('document.linkColor is ' + document.linkColor);
        document.linkColor = 'red';
    </script>
    <p>Document.vlinkColor</p>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/vlinkColor -->
    <!-- Deprecated: This feature is no longer recommended. -->
    <!-- The Document.vlinkColor property gets/sets the color of links that the user has visited in the document. -->
    <script>
        console.log('document.vlinkColor is ' + document.vlinkColor);
        document.vlinkColor = 'green'
    </script>
    <hr>

    <p>Document.anchors</p>
    <!-- 已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 -->
    <!-- 由于向后兼容的原因,该属性只返回那些拥有name属性的a元素,而不是那些拥有id属性的a元素. -->
    <div>
        <ol>
            <li><a name="div_red" href="#div_red">red</a></li>
            <li><a name="div_orange" href="#div_orange">orange</a></li>
            <li><a id="div_green" href="#div_green">green</a></li>
        </ol>
        <div id="div_red" style="width: 100px; height: 78px; background-color: red;">red</div>
        <div id="div_red" style="width: 100px; height: 78px; background-color: orange;">orange</div>
        <div id="div_red" style="width: 100px; height: 78px; background-color: rgb(105, 110, 105);">green</div>
    </div>
    <script>
        // 3个a元素，但是只有2个具有name属性。
        console.log('document.anchors.length = ' + document.anchors.length);
    </script>
    <hr>

    <p>Document.bgColor</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/bgColor -->
    <!-- 已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 -->
    <!-- bgColor 获取/设置当前文档的背景颜色 -->
    <script>
        console.log('document.bgColor is ' + document.bgColor);
        document.bgColor = 'grey';
    </script>
    <hr>

    <p>document.fgColor</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fgColor -->
    <!-- 已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 -->
    <!-- fgColor属性用来获取或设置当前文档的前景色或者文本颜色. -->
    <script>
        document.fgColor = 'blue';
    </script>
    <hr>

    <p>Document.cookie</p>
    <!-- Document.cookie -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie -->
    <!-- 获取并设置与当前文档相关联的 cookie。可以把它当成一个 getter and setter。 -->
    <script>
        console.log('document.cookie is ' + document.cookie);
        document.cookie = "name=oeschger";
        document.cookie = "favorite_food=tripe";
        console.log(document.cookie);
        // 显示: name=oeschger;favorite_food=tripe
    </script>
    <hr>


    <p>Document.forms</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/forms -->
    <!-- forms 返回当前文档中的 <form>元素的一个集合(一个 HTMLCollection)。 -->
    <div>
        <form action=""></form>
        <form action=""></form>
        <form action=""></form>
        <form action=""></form>
        <form action=""></form>
        <form action=""></form>
    </div>
    <script>
        console.log('document.forms.length is ' + document.forms.length);
    </script>
    <hr>

    <p>Document.lastModified</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/lastModified -->
    <!-- 返回一个字符串,其中包含了当前文档的最后修改日期和时间. -->
    <script>
        console.log('document.lastModified is ' + document.lastModified);
    </script>
    <hr>

    <p>Document.links</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/links -->
    <!-- links 属性返回一个文档中所有具有 href 属性值的 <area> 元素与 <a> 元素的集合。 -->
    <div>
        <!-- 上面的部分代码已经存在5个href -->
        <!-- area：3/5个href -->
        <area shape="" coords="" href="" alt="">
        <area shape="" coords="" href="" alt="">
        <area shape="" coords="" href="" alt="" href>
        <area shape="" coords="" href="" alt="" href>
        <area shape="" coords="" href="" alt="" href>
        <!-- a：4/5个href -->
        <a>1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
    </div>
    <script>
        // 5 + 3 + 4 = 12
        console.log('document.links.length is ' + document.links.length);
    </script>
    <hr>

    <p>document.referrer</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/referrer -->
    Document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面 跳转或打开的.
    <script>
        console.log('document.referrer is ' + document.referrer);
    </script>
    <hr>

    <p>Document.title</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/title -->
    <!-- 获取或设置文档的标题。 -->
    <script>
        console.log('document.title' + document.title);
        document.title = 'document demo';
    </script>


    <hr style="border: red 2px solid;">

    <p>document.write</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/write -->
    <!-- Document.write() 方法将一个文本字符串写入一个由 document.open() 打开的文档流（document stream）。 -->
    <script>
        document.write('Hello, World.');
        document.write('<p>Hello, World.</p>');
    </script>
    <hr>

    <p>document.writeln</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/writeln -->
    <!-- 向文档中写入一串文本，并紧跟着一个换行符。 -->
    <script>
        document.writeln('Hello, World.');
        document.writeln('<p>Hello, World.</p>');
    </script>
    <hr>

    <p>Document.getElementsByName()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByName -->
    <!-- 根据给定的name (en-US) 返回一个在 (X)HTML document的节点列表集合。 -->
    <div>
        <p name="test_name">1</p>
        <p name="test_name">2</p>
        <p name="test_name">3</p>
        <p name="test_name">4</p>
        <p name="test_name">5</p>
    </div>
    <script>
        var testNameNodes = document.getElementsByName('test_name');
        console.log('getElementsByName. testNameNodes.length is ' + testNameNodes.length);
        for (let index = 0; index < testNameNodes.length; index++) {
            const testNameNode = testNameNodes[index];
            console.log('testNameNode[' + index + '].innerHTML = ' + testNameNode.innerHTML);
        }
    </script>
    <hr>

    <p>Document.getElementsByTagName()</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName -->
    <!-- 返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。 -->
    <div>
        <ol>
            <li>Monday</li>
            <li>Tuesday</li>
            <li>Wednesday</li>
            <li>Thursday</li>
            <li>Friday</li>
            <li>Saturday</li>
            <li>Sunday</li>
        </ol>
        <ul>
            <li>啤酒</li>
            <li>饮料</li>
            <li>矿泉水</li>
            <li>花生</li>
            <li>瓜子</li>
            <li>八宝粥</li>
        </ul>
    </div>
    <script>
        var liNodes = document.getElementsByTagName('li');
        console.log('getElementsByTagName. liNodes.length is ' + liNodes.length);
        for (let index = 0; index < liNodes.length; index++) {
            const element = liNodes[index];
            console.log('li[' + index + '] = ' + element.innerText);
        }
    </script>

    <p>document.getElementById</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById -->
    <!-- Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。 -->
    <div>
        <input type="text" id="test_id" value="1">
        <input type="text" id="test_id" value="2">
        <input type="text" id="test_id" value="3">
        <input type="text" id="test_id" value="4">
        <input type="text" id="test_id" value="5">
    </div>
    <script>
        var testIdNode = document.getElementById('test_id');
        console.log('getElementById. testIdNode.value ' + testIdNode.value);
    </script>




</body>

</html>